<template>
        
    <!--d2-container-->
    <div class="visual" >
        <!--
        <button v-on:click="alarmAnimal()">alarmAnimal</button>
        -->
        <div class="inner-title">
            <div class="title">
                利华消防-监控大屏
                <div class="subtitle">
                    发生隐患 <em class="yh">{{alarmCount.total}}</em> 起&nbsp;&nbsp;
                    已处理 <em class="yc">{{alarmCount.processed}}</em> 起&nbsp;&nbsp;
                    未处理 <em class="wc">{{alarmCount.unprocess}}</em> 起
                </div>
            </div>
            
        </div>
        <div class="inner-wrap">
            <div class="point point-lt"></div>
            <div class="point point-rt"></div>
            <el-row :gutter="20" class="el-row-1">
                <el-col :span="7">
                    <div class="grid-content">
                        <div class="tit">实时预警消息</div>
                        <div class="horn horn-lt "></div>
                        <div class="horn horn-rt "></div>
                        <div class="horn horn-lb "></div>
                        <div class="horn horn-rb "></div>
                        <div class="alarm-wrap" id="alarmWrap">
                            <div class="alarm-inner" id="alarmInner">
                                    <div class="alarm-item" v-bind:class="{'alarm-active':key==0}"  v-for="(item,key,index) in alarmList" :key="index"  >
                                        <el-row>
                                            <el-col :span="10">项目名称：</el-col>
                                            <el-col :span="14">{{item.ProjectName}}</el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="10">最早发生时间：</el-col>
                                            <el-col :span="14">{{item.LogDate}}</el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="10">最后发生时间：</el-col>
                                            <el-col :span="14">{{item.LogEndTime}}</el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="10">告警描述：</el-col>
                                            <el-col :span="14">{{item.ErrorName}}</el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="10">故障类型：</el-col>
                                            <el-col :span="14">
                                                <template v-if="item.errorType==0">报警</template>
                                                <template v-if="item.errorType==1">故障</template>
                                                <template v-if="item.errorType==2">系统</template>
                                            </el-col>
                                        </el-row>
                                    </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="grid-content map-content">
                        <div class="tit">地图信息</div>
                        <div class="horn horn-lt "></div>
                        <div class="horn horn-rt "></div>
                        <div class="horn horn-lb "></div>
                        <div class="horn horn-rb "></div>
                        <div class="chart-map" id="chartMap">
                            <ve-bmap :settings="mapSettings" :series="mapSeries"></ve-bmap>
                        </div>
                        
                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="grid-content">
                        <div class="tit">当月隐患处理率</div>
                        <div class="horn horn-lt "></div>
                        <div class="horn horn-rt "></div>
                        <div class="horn horn-lb "></div>
                        <div class="horn horn-rb "></div>
                        <div class="chart-right" id="chartFaultPie"></div>
                        <div class="chart-right" id="chartFaultLine"></div>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="el-row-2">
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="tit">烟感系统</div>
                        <div class="horn horn-lt "></div>
                        <div class="horn horn-rt "></div>
                        <div class="horn horn-lb "></div>
                        <div class="horn horn-rb "></div>
                        <div class="chart-bottom" id="chartYanPie">
                        </div>

                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="tit">消防水源</div>
                        <div class="horn horn-lt "></div>
                        <div class="horn horn-rt "></div>
                        <div class="horn horn-lb "></div>
                        <div class="horn horn-rb "></div>
                        <div class="chart-bottom" id="chartShuiPie" >
                        </div>

                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="tit">消防巡查</div>
                        <div class="horn horn-lt "></div>
                        <div class="horn horn-rt "></div>
                        <div class="horn horn-lb "></div>
                        <div class="horn horn-rb "></div>
                        <div class="chart-bottom" id="chartXunPie" >
                        </div>

                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="tit">电气火灾</div>
                        <div class="horn horn-lt "></div>
                        <div class="horn horn-rt "></div>
                        <div class="horn horn-lb "></div>
                        <div class="horn horn-rb "></div>
                        <div class="chart-bottom" id="chartHuoPie" >
                        </div>

                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="tit">用传系统</div>
                        <div class="horn horn-lt "></div>
                        <div class="horn horn-rt "></div>
                        <div class="horn horn-lb "></div>
                        <div class="horn horn-rb "></div>
                        <div class="chart-bottom" id="chartChuanPie" >
                        </div>

                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="tit">视频系统</div>
                        <div class="horn horn-lt "></div>
                        <div class="horn horn-rt "></div>
                        <div class="horn horn-lb "></div>
                        <div class="horn horn-rb "></div>
                        <div class="chart-bottom" id="chartVideoPie" >
                            
                        </div>

                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>

    import list from '@/pages/demo/charts/list/_mixin/list.js'
    import {getErrorList,getUserProjectStatu} from '@/api/sys/getErrorList'
    import {getErrorChart,getDeviceStatus,getDeviceErrorCount} from '@/api/sys/getErrorChart'
    import {getProject} from '@/api/sys/getProject'

    export default{
        mixins: [
            list
        ],
        data () {
            return{
                chartFaultPie:null,
                chartFaultLine:null,
                chartYanPie:null,
                chartShuiPie:null,
                chartXunPie:null,
                chartHuoPie:null,
                chartChuanPie:null,
                chartVideoPie:null,
                mapSeries:[
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        color:['yellow'],
                        data: [
                            [120, 30, 1], // 经度，维度，value，...
                            [120.34, 32, 1],
                            [120.34, 33, 0.5]
                        ]

                    }
                ],
                alarmList:[],
                alarmWrapH:0,
                alarmScrollT:0,
                alarmScrollStep:0,
                alarmCount:{
                    total:0,
                    processed:0,
                    unprocess:0
                },
                invRefresh:null
            }
        },
        methods:{
            refreshChartFaultPie(){

                let legends=['正常','离线','故障','其他'];
                let datas=[
                    {value:0, name:'正常'},
                    {value:0, name:'离线'},
                    {value:0, name:'故障'},
                    {value:0, name:'其他'}
                ];
                let online = '0%';
                getUserProjectStatu(null,-1,-1,-1).then(res=>{
                    let count = 0;
                    for (const it of res.data) {
                        count+=it.count;
                        switch(it.status){
                            case 0:
                                datas[3].value = it.count;
                            break;
                            case 1: //正常
                                datas[0].value = it.count;
                            break;
                            case 2:
                                datas[1].value = it.count;
                            break;
                            case 3:
                                datas[2].value = it.count;
                            break;
                        }
                    }

                    if(res.data.length>0){
                        online = (datas[0].value/count)*100 + '%';
                    }

                    var option = {
                        color:['#5361FF','#F4C35C','#E44AD1','#61F7EB'],
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            icon:'circle',
                            orient: 'horizontal',
                            x: 'center',
                            y:'bottom',
                            data:legends,
                            textStyle:{
                                color:'#999999'
                            }
                        },
                        graphic:{
                            type:'text',
                            left:'center',
                            top:'center',
                            z:2,
                            style:{
                                text:online+'\n在线',
                                fontSize:20,
                                fill:'#5361FF'
                            }
                        },
                        series: [
                            {
                                name:'设备状态',
                                type:'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center',
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data:datas
                            }
                        ]
                    };

                    this.chartFaultPie.setOption(option);


                });
                
            },
            refreshChartFaultLine(){
                let times=[];
                let datas=[];

                let aTotal = 0,
                    aProcess=0,
                    aUnprocess=0;

                getErrorChart().then(res=>{

                    for (const it of res.data) {
                        times.push(it.DAY);
                        datas.push( Math.round((it.processed/it.total)*100)   );
                        aTotal+=it.total;
                        aProcess+=it.processed;
                        aProcess+=it.unprocess;
                    }

                    this.alarmCount.total = aTotal;
                    this.alarmCount.processed = aProcess;
                    this.alarmCount.unprocess = aUnprocess;

                    let option = {
                        grid:{
                            top:30,
                            bottom:30
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: times,
                            axisLabel:{
                                color:'#fff'
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine:{
                                show:false
                            },
                            axisLabel:{
                                color:'#fff'
                            },
                            name:'处理率(%)',
                            nameTextStyle:{
                                color:'#fff'
                            }
                        },
                        series: [{
                            data: datas,
                            type: 'line',
                            areaStyle: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'RGBA(226, 82, 49, 1)'
                                }, {
                                    offset: 1,
                                    color: 'RGBA(73, 76, 229, 1)'
                                }])
                            },
                            lineStyle:{
                                width:3,
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'RGBA(226, 82, 49, 1)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'RGBA(73, 76, 229, 1)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            },
                            symbolSize:10
                        }]
                    };
                    this.chartFaultLine.setOption(option);
                });
                

            },
            refreshChartBottomPie(){

                //在线状态
                getDeviceStatus().then(resOnline=>{

                    //处理与否
                    getDeviceErrorCount().then(resProcess=>{
                        let onlines=[
                            {name:'在线',value:0},
                            {name:'离线',value:0}
                        ],process=[
                            {name:'已处理',value:0},
                            {name:'未处理',value:0}
                        ];
                        
                        for (const on of resOnline.data) {
                            onlines[0].value=on.onlineCount;
                            onlines[1].value= on.deviceCount-on.onlineCount;

                            for (const pr of resProcess.data) {
                                if(pr.devType == on.devType){
                                    process[0].value=pr.processed;
                                    process[1].value=pr.unprocess;
                                    break;
                                }
                            }
                            
                            switch(on.devType){
                                case 9: //电气火灾 
                                onlines[0].value=8;
                                this.chartBottom(onlines,process,this.chartHuoPie);
                                break;
                                case 10: //烟感
                                this.chartBottom(onlines,process,this.chartYanPie);
                                break;
                                case 11: //水
                                this.chartBottom(onlines,process,this.chartShuiPie);
                                break;
                                case 12: //用传
                                this.chartBottom(onlines,process,this.chartChuanPie);
                                break;
                                case 255: //巡查
                                this.chartBottom(onlines,process,this.chartXunPie);
                                break;
                            }
                        }

                        this.chartBottom(onlines,process,this.chartXunPie);
                        this.chartBottom(onlines,process,this.chartChuanPie);
                        this.chartBottom(onlines,process,this.chartVideoPie);

                    });
                });


            },
            chartBottom(onlinesData,processData,chart){
                let legends=['在线','离线','已处理','未处理'];
                let option = {
                    color:['#666666','#34C970'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        icon:'roundRect',
                        orient: 'horizontal',
                        x: 'center',
                        y:'bottom',
                        itemWidth:5,
                        itemHeight:5,
                        itemGap:4,
                        textStyle:{
                            color:'#fff',
                            fontSize:10
                        },
                        data:legends
                    },
                    series: [
                        { //小圆（处理与否）
                            name:'',
                            type:'pie',
                            selectedMode: 'single',
                            radius: [0, '30%'],
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            tooltip:{
                                show:false
                            },
                            data:processData,
                            color:['#FCCA97','#B4B4FD']
                        },
                        { //大圆（在线与否）
                            name:'',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center',
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:onlinesData
                        }
                    ]
                };
                chart.setOption(option);
            },

            loadAlarm(){
                
                getErrorList().then(data=>{
                    this.alarmList=data.data;
                });
            },

            loadAreaPoints(){
                getProject(null, null, null, null, '中国',true).then(res => {
                    let datas=[];
                    for (const it of res.data) {
                        datas.push([it.lng,it.lat,1]);
                    }

                    this.mapSeries[0].data=datas;
                })
            },

            alarmAnimal(){
                this.invRefresh = setInterval(()=>{
                    let innerH = document.getElementById('alarmInner').offsetHeight;
                    let step = this.alarmScrollStep;
                    let diff = innerH-this.alarmScrollT-this.alarmWrapH;
                    if(diff > 0){
                        if(diff<this.alarmWrapH){step=diff;}
                        this.alarmScrollT+=step;
                        document.getElementById('alarmInner').style.transform = "translateY(-"+ this.alarmScrollT +"px)" ;
                    }else{
                        document.getElementById('alarmInner').style.transform = "translateY(0px)" ;
                        this.alarmScrollT=0;
                    }
                    let itemIndex = Math.floor(this.alarmScrollT/this.alarmScrollStep);
                    if(itemIndex>0){
                        document.getElementsByClassName('alarm-item')[itemIndex-1].classList.remove('alarm-active');
                    }
                    document.getElementsByClassName('alarm-item')[itemIndex].classList.add('alarm-active');

                    this.refreshChartBottomPie();
                    this.refreshChartFaultLine();
                    this.refreshChartFaultPie();
                    
                },5000);
                
            }
        },
        created(){
            this.loadAlarm();
            this.loadAreaPoints();
        },
        mounted(){

            this.chartFaultLine = this.$echarts.init(document.getElementById('chartFaultLine'));
            this.chartFaultPie = this.$echarts.init(document.getElementById('chartFaultPie'));
            this.chartYanPie=this.$echarts.init(document.getElementById('chartYanPie'));
            this.chartShuiPie=this.$echarts.init(document.getElementById('chartShuiPie'));
            this.chartXunPie=this.$echarts.init(document.getElementById('chartXunPie'));
            this.chartHuoPie=this.$echarts.init(document.getElementById('chartHuoPie'));
            this.chartChuanPie=this.$echarts.init(document.getElementById('chartChuanPie'));
            this.chartVideoPie=this.$echarts.init(document.getElementById('chartVideoPie'));


        
            setTimeout(() => {
                this.refreshChartFaultPie();
                this.refreshChartFaultLine();
                this.refreshChartBottomPie();
            }, 1000);

            setTimeout(()=>{
                this.alarmWrapH = document.getElementById('alarmWrap').offsetHeight;
                this.alarmScrollStep = document.getElementsByClassName('alarm-item')[0].offsetHeight;
                //alert(this.alarmScrollStep);

                this.alarmAnimal();
            },5000);


            
            

        },
        beforeDestroy(){
            if(this.invRefresh){
                clearInterval(this.invRefresh);
            }
        }

    }
</script>

<style>
    .visual{
        height: 100%;
        width: 100%;
        border: solid 0px red;
        background-image: url(./image/visual-bg.png);
        background-color: rgba(21,26,100,1);
        /*background: green;*/
        position: relative;
        float: left;
        /*background-position: center -50px;*/
        background-size: 100%;
    }

    .visual .inner-wrap{
        border: solid 2px #5361FF;
        height: 96%;
        width: 98%;
        margin: auto auto;
        margin-top: 15px;
        position: relative;
        border-bottom: 0px;
    }

    .visual .inner-wrap .point{
        width: 10px;
        height: 10px;
        position: absolute;
        background: #5361FF;
        border-radius: 5px;
        box-shadow: rgb(107, 119, 252) 0px 0px 5px 5px;
        opacity:0.8;
    }

    .visual .inner-wrap .point-lt{
        top:-5px;
        left: -5px;
    }

    .visual .inner-wrap .point-rt{
        top:-5px;
        right: -5px;
    }

    .visual .inner-title{
        color: #fff;
        position: absolute;
        width: 100%;
        z-index: 1;
    }

    .visual .inner-title .title{
        width: 250px;
        margin: 0px auto;
        text-align: center;
        border: solid 0px #5361FF;
        font-size: 22px;
    }

    .visual .inner-title .subtitle{
        width: 250px;
        height: 20px;
        margin: -14px auto;
        text-align: center;
        border: solid 1px #5361FF;
        font-size: 12px;
        padding-top: 20px;
        border-top:0px;
        border-radius: 0px 0px 25px 25px;
        box-shadow: RGBA(83, 97, 255, 1) 0px 0px 10px 2px;
    }

    .visual .inner-title .subtitle .yh{
        font-weight: 700;
        font-style: normal;
        color: yellow;
    }

    .visual .inner-title .subtitle .yc{
        font-weight: 700;
        font-style: normal;
        color: #5361FF;
    }

    .visual .inner-title .subtitle .wc{
        font-weight: 700;
        font-style: normal;
        color: red;
    }

    .el-row-1{
        height: 56%;
        padding: 10px;
        margin-top: 20px;
    }

    .el-row-2{
        height: 36%;
        padding: 10px;
        margin-top: 20px;
    }

    .el-row-2 .grid-content .tit{
        width: 100px;
    }

    .el-col {
        border-radius: 4px;
        height: 100%;
    }


    .grid-content {
        border-radius: 4px;
        height: 100%;
        border: solid 1px RGBA(83, 97, 255, 0.7);
        position: relative;
        padding: 10px;
        background:rgba(83,97,255,0.07);
    }

    .grid-content .tit{
        position: relative;
        border: solid 0px red;
        margin: auto;
        margin-top: -15px;
        width: 200px;
        height: 10px;
        line-height: 10px;
        text-align: center;
        color: #fff;
        border-left: solid 2px RGBA(83, 97, 255, 1);
        border-right: solid 2px RGBA(83, 97, 255, 1);
        box-shadow: rgb(107, 119, 252) 2px 0px 0px -1px;
        z-index: 1;
        font-size: 12px;

    }

    .grid-content .horn{
        width: 30px;
        height: 30px;
        position: absolute;
        border: solid 1px rgba(83,97,255,1);
    }

    .grid-content .horn-lt{
        left: 0px;
        top: 0px;  
        border-bottom: 0px;
        border-right: 0px;
    }

    .grid-content .horn-rt{
        right: 0px;
        top: 0px;  
        border-left: 0px;
        border-bottom: 0px;
    }

    .grid-content .horn-lb{
        left: 0px;
        bottom: 0px;  
        border-top: 0px;
        border-right: 0px;
    }

    .grid-content .horn-rb{
        right: 0px;
        bottom: 0px;  
        border-top: 0px;
        border-left: 0px;
    }

    .alarm-wrap{
        height: 100%;
        border: solid 0px red;
        overflow: hidden;
    }

    .alarm-inner{
        border: solid 0px yellow;
        transition-duration:500ms;
        transition-delay:0;
    }

    .alarm-item{
        border: solid 1px RGBA(83, 97, 255, 1);
        padding: 10px;
        margin-bottom: 10px;
        color: #fff;
        font-size: 12px;
    }

    .alarm-active{
        border-color: RGBA(254, 123, 75, 1);
        box-shadow: RGBA(254, 123, 75, 1) 0px 0px 30px 5px inset;
    }

    .map-content{
        border: solid 1px #5361FF;
        height: 93%;
        margin-top: 4%;
    }

    .chart-right{
        height: 49%;
        border: solid 0px red;
    }

    .chart-bottom{
        height: 100%;
        border: solid 0px red;
    }

    .chart-map{
        height: 100%;
        border: solid 0px red;
        overflow: hidden;
    }

</style>